<template>
	<view class="content">
        <view class="main">我的</view>




		<!-- tab导航栏 -->
		<view class="tabbar">
			<view class="tab faxian" @click="Clitab(0)" :style="tabbar_sel===0? 'background-color:#eaffc2;':'' ">
				发现
			</view>
			<view class="tab riji" @click="Clitab(1)" :style="tabbar_sel===1? 'background-color:#eaffc2;':'' ">
				日记
			</view>
			<view class="tab wode" @click="Clitab(2)" :style="tabbar_sel===2? 'background-color:#eaffc2;':'' ">
				我的
			</view>
		</view>
		<view class="tabbar_2"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选择tab的索引
				tabbar_sel:2,
			}
		},
		onLoad() {

		},
		methods: {
			Clitab(n){
				if(n ===0){
					this.tabbar_sel = 0
					uni.redirectTo({url:'/pages/index/index'})
				}else if(n === 1){
					this.tabbar_sel = 1
					uni.redirectTo({url:'/pages/journal/journal'})
				}else if(n === 2){
					this.tabbar_sel = 2
					uni.redirectTo({url:'/pages/wode/wode'})
				}
			}
		}
	}
</script>

<style>
.tabbar{
		display: flex;
		position: fixed;
		bottom: 20px;
		transform: translateX(12%);
		z-index: 9;

	}
	.tabbar_2{
		width: 540rpx;
		height: 32px;
		border: 1px solid #000;
		border-radius: 15px;
		position: fixed;
		bottom: 20px;
		transform: translateX(13%) translateY(5px);
	}
	.tab{
		width: 180rpx;
    height: 30px;
		line-height: 30px;
		text-align: center;
		background-color: #fff;
		font-size: 12px;
	}
	.faxian{
		border: 1px solid #000;
		border-right: 0;
		border-radius: 15px 0 0 15px;
	}
	.riji{
		border: 1px solid #000;
	}
	.wode{
		border: 1px solid #000;
		border-left: 0;
		border-radius:0 15px 15px 0;
	}
</style>
